<template>
  <div class="drager_col" ref="container" :style="{ width: width, height: height }">
    <div class="drager_left" :style="{ width: left + '%', paddingRight: paddingRight }" v-if="showSlider">
      <div class="collapse-btn-warpper">
        <div class="center-collapse" @click="onCollapse">
          <el-icon><ArrowRightBold /></el-icon>
        </div>
        <slot name="left"> </slot>
      </div>
    </div>
    <div
      class="slider_col"
      @touchstart.passive="mobileDragCol"
      @mousedown="dragCol"
      v-show="showSlider"
      :style="{
        width: sliderWidth + 'px',
        marginLeft: -sliderWidth / 2 + 'px',
        marginRight: -sliderWidth / 2 + 'px',
      }"
    >
      <span class="iconfont">&#xe651;</span>
    </div>
    <div class="drager_right" :style="{ width: 100 - left + '%', paddingLeft: paddingLeft }">
      <div>
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

defineOptions({
  name: 'DragCol',
});

const props = defineProps({
  leftPercent: {
    type: Number,
    default: 50,
  },
  sliderWidth: {
    type: Number,
    default: 20,
  },
  width: {
    type: String,
    default: '400px',
  },
  height: {
    type: String,
    default: '400px',
  },
  sliderColor: {
    type: String,
    default: '#6f808d',
  },
  sliderBgColor: {
    type: String,
    default: '#1f2e3a',
  },
  sliderHoverColor: {
    type: String,
    default: '#6f808d',
  },
  sliderBgHoverColor: {
    type: String,
    default: '#16222a',
  },
});
const container = ref();
const time = ref(0);
const left = ref(props.leftPercent);
const isDragging = ref(false);
const showSlider = ref<boolean>(true);
const paddingLeft = ref<string>('10px');
const paddingRight = ref<string>('10px');
const mobileDragCol = (e: TouchEvent) => {
  e = e || window.event;
  e.stopPropagation();
  let oldPos = e.changedTouches[0].clientX;
  let oldPosPercent = left.value;
  let newPos = 0;
  let newPosPercent = 0;
  const containerWidth = container.value.offsetWidth;
  const vue = this;
  isDragging.value = true;
  emits('isDragging', isDragging.value);
  document.ontouchmove = sliderDrag;
  document.ontouchend = cancelSliderDrag;
  function sliderDrag(e: TouchEvent) {
    if (time.value && Date.now() - time.value < 40) return;
    time.value = Date.now();
    e = e || window.event;
    e.stopPropagation();
    newPos = e.changedTouches[0].clientX;
    const movingDistancePercent = parseFloat((((oldPos - newPos) / containerWidth) * 100).toFixed(3));
    newPosPercent = oldPosPercent - movingDistancePercent;
    if (newPosPercent <= 0) {
      left.value = 0;
    } else if (newPosPercent >= 100) {
      left.value = 100;
    } else {
      left.value = newPosPercent;
    }
    emits('dragging', left.value);
  }
  function cancelSliderDrag() {
    isDragging.value = false;
    emits('isDragging', isDragging.value);
    document.ontouchmove = null;
    document.ontouchend = null;
  }
};
const emits = defineEmits(['isDragging', 'dragging', 'isDragging']);
const dragCol = (e: MouseEvent) => {
  e = e || window.event;
  e.preventDefault();
  e.stopPropagation();
  let oldPos = e.clientX;
  let oldPosPercent = left.value;
  let newPos = 0;
  let newPosPercent = 0;
  const containerWidth = container.value.offsetWidth;
  const vue = this;
  isDragging.value = true;
  emits('isDragging', isDragging.value);
  document.onmousemove = sliderDrag;
  document.onmouseup = cancelSliderDrag;
  function sliderDrag(e: MouseEvent) {
    if (time.value && Date.now() - time.value < 40) return;
    time.value = Date.now();
    e = e || window.event;
    e.preventDefault();
    e.stopPropagation();
    newPos = e.clientX;
    const movingDistancePercent = parseFloat((((oldPos - newPos) / containerWidth) * 100).toFixed(3));
    newPosPercent = oldPosPercent - movingDistancePercent;
    if (newPosPercent <= 0) {
      left.value = 0;
    } else if (newPosPercent >= 100) {
      left.value = 100;
    } else {
      left.value = newPosPercent;
    }
    emits('dragging', left.value);
  }
  function cancelSliderDrag() {
    isDragging.value = false;
    emits('isDragging', isDragging.value);
    document.onmouseup = null;
    document.onmousemove = null;
  }
};
const cloneLeft = ref(0);
const hiddenLeft = () => {
  if (showSlider.value) {
    cloneLeft.value = left.value;
    left.value = 0;
    showSlider.value = false;
    paddingLeft.value = '10px';
    paddingRight.value = '10px';
  }
};
const showLeft = () => {
  left.value = cloneLeft.value;
  showSlider.value = true;
  paddingLeft.value = '10px';
  paddingRight.value = '10px';
};

const onCollapse = () => {
  alert('功能建设中');
};

defineExpose({ hiddenLeft, showLeft });
</script>
<style>
.drager_col {
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
}
.drager_col * {
  box-sizing: border-box;
}
.drager_col > div {
  height: 100%;
}
/* .drager_left {
  padding-right: 10px;
} */
.drager_left > div {
  height: 100%;
  /* overflow: hidden; */
}
/* .drager_right {
  padding-left: 10px;
} */
.drager_right > div {
  height: 100%;
  overflow: hidden;
}
.drager_col > .slider_col {
  transition: background 0.2s;
  position: relative;
  z-index: 1;
  cursor: col-resize;
  background: v-bind('sliderBgColor');
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100%;
}
.collapse-btn-warpper {
  height: 100%;
  width: 100%;
  position: relative;
}

.center-collapse {
  align-items: center;
  background: #e6ecf5;
  color: #000;
  /* 应用fadeIn动画，持续时间为2秒 */
  animation: fadeIn 150ms;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: -30px;
  top: calc(50% - 26px);
  width: 18px;
  z-index: 99;
}
@keyframes fadeIn {
  0% {
    /* 初始透明度为0 */
    opacity: 0;
  }
  100% {
    /* 最终透明度为1 */
    opacity: 1;
  }
}
</style>
